<script setup>
import { ref, reactive, computed } from 'vue';
import { useTeacherStore } from '@/stores/modules/teacherStore';
import { useRouter } from 'vue-router';
import todoListItem from '@/component/todoListItem.vue';
import {
    reqPsychologyNoteInTeacher,
    reqPsychologyNoteUntreated
} from '@/api/teacher/record/psychology';
import { reqPublicClassInTeacher } from '@/api/teacher/record/publicClass';

const router = useRouter();

const teacherStore = useTeacherStore();

// 心理预约列表
const psychologyList = reactive([]);

// 文体和图书馆的列表
const WENandLIBList = reactive([]);

// 下拉加载
const load = () => {
    loading.value = true;
    loadTodoList();
};

// 是否显示加载中
const loading = ref(false);

// 是否提示todolist没有更多数据
const noMore = ref(false);

// 在加载时和没有数据的时候不能继续使用下拉加载
// (可以理解为在加载时和没多数据时不能使用load方法)
const disabled = computed(() => loading.value || noMore.value);

// 请求代办事项
const loadTodoList = async () => {
    const roleNums = teacherStore.roleNums;
    let flag;
    if (
        roleNums.includes(18) ||
        roleNums.includes(24) ||
        roleNums.includes(19)
    ) {
        flag = await getNote(
            reqPsychologyNoteUntreated,
            psychologyList,
            '预约申请'
        );
    } else {
        flag = await getNote(reqPublicClassInTeacher, WENandLIBList);
    }
    pageNo++;
    noMore.value = flag;
    loading.value = false;
};

let pageNo = 1;

const getNote = async (req, list, setLeaveType) => {
    const result = await req(pageNo, 10);

    leaveType.value = setLeaveType;

    if (result.status == 200) {
        const dataList = result.dataList;

        if (dataList) {
            list.push(...dataList);

            if (dataList.length < 5) {
                return true;
            }

            return false;
        } else {
            return true;
        }
    } else {
        return true;
    }
};

// leavetype 用于表示是哪个申请条
const leaveType = ref('');
</script>

<template>
    <div class="head">
        <div class="heading">待办事项</div>
        <a class="more" @click="router.push({ name: 'teacher-todo' })">
            查看更多>>
        </a>
    </div>
    <ul
        class="todoList"
        v-infinite-scroll="load"
        :infinite-scroll-disabled="disabled"
        infinite-scroll-distance="10"
    >
        <todoListItem
            :psychologyList="psychologyList"
            :WENandLIBList="WENandLIBList"
            :leaveType="leaveType"
        ></todoListItem>
        <div v-if="loading" class="loading" v-loading="loading"></div>
        <div v-if="noMore" class="no-more">没有更多数据了</div>
    </ul>
</template>

<style lang="scss" scoped>
.head {
    display: flex;
    justify-content: space-between;
    align-content: center;

    .heading {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18rem;
        font-weight: bold;

        .count {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 16rem;
            height: 16rem;
            border-radius: 10rem;
            color: white;
            background-color: rgb(255, 51, 51);
            font-size: 10rem;
            margin-left: 6rem;
        }
    }

    .more {
        display: flex;
        align-items: center;
        color: rgb(39, 114, 253);
        font-size: 13rem;
    }
}

.todoList {
    position: absolute;
    top: 18rem;
    left: 20rem;
    right: 20rem;
    bottom: 10rem;
    margin-top: 20rem;
    overflow: auto;
    padding-top: 5rem;

    .loading {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 10rem;
        font-size: large;
        margin-top: 20rem;
        background-color: #bbb;
    }

    .no-more {
        width: 100%;
        height: 10rem;
        margin-top: 20rem;
        font-size: 14rem;
        color: #999;
        text-align: center;
    }
}
</style>
